<template>
  <div class="two flex_column">
    <everyHorn />
    <div class="tital_home">
      <img src="@/assets/img/home-page/two_title.png" alt="">
      <h2>分拣效率排序</h2>
    </div>
    <div v-if="btnTwo" class="main flex_1 flex_column">
      <div class=" th">
        <ul>
          <li>排序</li>
          <li>姓名</li>
          <li>PCS/天</li>
        </ul>
      </div>
      <div class="content flex_1">
        <vue-seamless-scroll :data="pickList" :class-option="seamlessScrollOption" class="seamless">
          <ul>
            <li v-for="(item, index) in pickList" :key="item.name">
              <p v-if="index+1 <=3" class="name normal sort_large"><span>{{ index+1 }}</span></p>
              <p v-else class="name normal"><span>{{ index+1 }}</span></p>
              <p class="name">{{ item.pickerName }}</p>
              <p class="name">{{ item.sum }}</p>
            </li>
          </ul>
        </vue-seamless-scroll>
      </div>
    </div>
    <div v-else class="main flex_1 flex_column flex_center">
      暂无权限
    </div>
  </div>
</template>

<script>
import everyHorn from './every_horn.vue'
import { authoritymanagement } from '@/assets/js/utils.js'
export default {
  name: '',
  components: {
    everyHorn
  },
  data() {
    return {
      pickList: [],
      btnTwo: '' // 查看权限
    }
  },
  computed: {
    seamlessScrollOption() {
      return {
        step: 0.15, // 数值越大速度滚动越快
        limitMoveNum: 8, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    }
  },
  mounted() {
    // 获取当前登录人权限
    let RoleCode = this.$getLocalItem('jx_RoleCode')
    this.btnTwo = authoritymanagement(RoleCode, 'lypc_btn_btnTwo')
    if (this.btnTwo) {
      this.init()
    }
  },
  methods: {
    // 初始化数据
    init() {
      this.$http.get('/ly-wms-servicer/pick/picker/num', {}, res => {
        if (res && res.code == 0) {
          this.pickList = Array.isArray(res.responseBody) ? res.responseBody : []
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.two {
  position: relative;
  width: 649px;
  height: 275px;
  background-image: url('~@/assets/img/home-page/one.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  .th {
    font-weight: bold;
    font-size: 16px;
    ul {
      display: flex;
      justify-content: space-around;
      width: 100%;
      li {
        text-align: center;
        width: 33%;
      }
    }
  }
  .seamless {
    height: 180px;
    width: 100%;
    overflow: hidden;
    ul {width: 100%;}
    li {
      display: flex;
      // justify-content: space-around;
      width: 100%;
      line-height: 30px;
      font-size: 12px;
      p{
        width: 33%;
        height: 30px;
        text-align: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .normal {
        text-align: center;
        span{
          display: inline-block;
          width: 35px;
          height: 30px;
          line-height: 25px;
          font-size: 12px;
          background-size: 100% 100%;
        }
      }
      .sort_large {
        span {
          color: #fff;
          background-image: url('~@/assets/img/home-page/sort.png');
        }
      }
    }
  }
}
</style>
